﻿@{
    ViewBag.Title = "Reservar habitacion";
}

<h2>Reservar habitación</h2>


<html lang="es">

<head>

<title>Reservar Habitacion</title>
@*	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>*@
	<script type="text/javascript" src="/Scripts/ReservarHabitacion.js"></script>
    <script type="text/javascript" src="/Scripts/ReservaCliente.js"></script>
    <script type="text/javascript" src="/Scripts/ReservaFinal.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;"></script>    
    <script type="text/javascript" src="http://gmap.nurtext.de/js/jquery.gmap-1.1.0-min.js"></script>
	@*<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>*@
    @*<script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>*@
    <script type="text/javascript" src="/Scripts/Validaciones.js"></script>
    <script type="text/javascript" src="/Scripts/TimePicker.js"></script>
    
    <style type="text/css">        
        #maps
        {
            height: 150px; 
            width:420px; 
            border: 1px solid #979797;
            visibility: "visible";            
            }
        #box-table-a
        {
	        font-family: Arial, Helvetica, sans-serif;	        
	        font-size: 12px;
	        margin: 45px;
	        width: 90%;
	        text-align: left;
	        border-collapse: collapse;
        }
        #box-table-a th
        {
	        font-size: 13px;
	        font-weight: bold;
	        padding: 8px;
	        background: #2A323E ;	        
	        border-bottom: 1px solid #fff;
	        color: white;
	        text-align:center;
        }
        #box-table-a td
        {
	        padding: 8px;
	        background:#F0F0F0 ; 
	        border-bottom: 1px solid #F0F0F0 ;
	        color: #696969;
	        border-top: 1px solid transparent;
	        text-align:center;
        }
        #box-table-a tr:hover td
        {
	        background: #DCDCDC;
	        color: #111;
        }
        #Total
        {
            text-align:center;
        }
        #TotalLabel
        {
            text-align:right;
        }
    </style>
    
</head>

<body>
	
    <div class = "demo">

    <div id="tabs">
	<ul>
		<li><a href="#tabs-1" id = "pestana1">Reserva de habitación</a></li>		
        <li><a href="#tabs-2" id = "pestana2">Datos del cliente</a></li>
        <li><a href="#tabs-3" id = "pestana3">Confirmación de Datos</a></li>
	</ul>



    <div id="tabs-1">

		<div class="widget">
			<div class="title">
				<h6>Registrar reserva</h6>
			</div>

            <div class = "formRow"><span>Hotel</span>
                <div class = "formRight" > 
                    <select id = "ComboHoteles">
                        
                    </select>
                 </div>            
            </div>

			<div class="formRow"><span>Fecha de llegada</span>                
				<div class = "formRight" >                                         
					<div class="demo">
						<input type="text" id="FechaLlegada"/>
					</div>
				</div>                
				<div class="clear"></div>
			</div>

			<div class="formRow"><span>Fecha de salida</span>                
				<div class = "formRight" > 
					<div class="demo">
						<input type="text" id="FechaSalida"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id = "buscame" type="submit" value="Buscar" class = "redB" />
					</div>
				</div>                
				<div class="clear"></div>
			</div>
        </div>
      

      
		
			<div class = "widget" id = "tipos">
				<div class="title"><!--img src="../../Content/images/icons/dark/frames.png" alt="" class="titleIcon" /--><h6>Tipos de habitacion del hotel</h6></div>
				<table cellpadding = "0" cellspacing = "0" width = "90%" id = "box-table-a" >
					<thead>
						<tr>
							<th>Tipo de habitación</th>
							<th>Cantidad de Habitaciones</th>
							<th>Precio unitario($)</th>
                            <th>Subtotal($)</th>
						</tr>
					</thead>
                    
                    <tfoot>
                        <tr>
                            <th id = "cantDiasLabel">Cantidad de Dias</th>
                            <th id = "cantDias"></th>
                            <th id="TotalLabel">Total</th>
                            <th id="Total">0</th>
                        </tr>
                    </tfoot>

		    		<tbody  id = "tablaTipos">
					</tbody>
				</table>
			</div>			
		
             <div class="widget" id = "tipos2">
			    <div class="title">
				    <h6>Servicio de Recepcion al aeropueto</h6>
			    </div>


                <div class="formRow"><span>Desea contar con el servicio?</span>
				    <div class = "formRight" > 
					    <div class="demo">
						    <input type="checkbox" id="checkAerop" value="one" /><br />                            
					    </div>
				    </div>				    
			    </div>

                <div id="fieldAeropuerto">
			        <div class="formRow">
				        <span>Hora de llegada</span>                
				        <div class = "formRight" >                                         
					        <input type="text" value="" id = "HoraLlegada"/>
				        </div>                
				        <div class="clear"></div>
			        </div>

			        <div class="formRow">
				        <span>Aerolinea</span>
				        <div class = "formRight" >
					        <input type="text" value="" id="Aerolinea" />
				        </div>
				        <div class="clear"></div>
			        </div>

			        <div class="formRow"><span>Nro. Vuelo</span>                
				        <div class = "formRight" > 
					        <input type="text" value="" id="NVuelo" /> 
				        </div>                
				        <div class="clear"></div>
			        </div>  
			
			        <div class="formRow">
				        <span>Cantidad de Personas</span>
				        <div class = "formRight" > 
					        <input type="text" value="" id="CantPersonas" /> 
				        </div>                
				        <div class="clear"></div>
			        </div>  
                </div>

                <div class="widget" id = "tipos3">

			       @* <div class="title">
				        <h6>Servicios Adicionales</h6>
			        </div>

                    <div class="formRow"><span>Desea contar con servicios adicionales?</span>
				    <div class = "formRight" > 
					    <div class="demo">
						    <input type="checkbox" id="checkServices" value="one" /><br />                            
					    </div>
				    </div>				    
			        </div>*@

                    @*<div id = "ServiciosAdicionales">
                        
                        <div class="formRow"><span>Desayuno</span>
				            <div class = "formRight" > 
					            <div class="demo">
						            <input type="checkbox" id="checkDesayuno" value="one" /><br />                            
					            </div>
				            </div>				    
			            </div>

                        <div class="formRow"><span>Almuerzo</span>
				            <div class = "formRight" > 
					            <div class="demo">
						            <input type="checkbox" id="checkAlmuerzo" value="one" /><br />                            
					            </div>
				            </div>				    
			            </div>
                    
                        <div class="formRow"><span>Cena</span>
				            <div class = "formRight" > 
					            <div class="demo">
						            <input type="checkbox" id="checkCena" value="one" /><br />                            
					            </div>
				            </div>				    
			            </div>          


                        <div class="formRow"><span>Adicional Servicios</span>                
				            <div class = "formRight" >                              
					            <span id = "Adicional">0</span>
				            </div>                
				            <div class="clear"></div>
			            </div>

                        <div class="formRow"><span>Total</span>                
				            <div class = "formRight" >                              
					            <span id = "TotalAjeno"></span>
				            </div>                
				            <div class="clear"></div>
			            </div>

                
                    </div>*@


                     <div class="widget" id = "tipos4">

			            <div class="title">
				            <h6>Invitado de Evento</h6>
			            </div>

                        <div class="formRow"><span>Es usted invitado de algun evento?</span>
				        <div class = "formRight" > 
					        <div class="demo">
						        <input type="checkbox" id="checkEvento" value="one" /><br />                            
					        </div>
				        </div>				    
			            </div>

                        <div id = "OfertaEvento">  
                            <div class="formRow">
				                <span>Id. del Evento</span>
				                <div class = "formRight" > 
					                <input type="text" value="" id="idEvento" />
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <input id = "ValidarEvento" type="submit" value="Validar" class = "redB" />
				                </div>                
				                <div class="clear"></div>
			                </div>   
                            
                            <div class="formRow" id = "EventoIncorrecto"><span><font color="#FF0000">* Id. Evento Incorrecto</font></span>                                                
                                   <div class="clear"></div>
                            </div>

                            <div class="formRow" id = "EventoCorrecto"><span><font color="#008000">* Id. Evento Correcto</font></span>                                                
                                   <div class="clear"></div>
                            </div>
                            
                                                 
                        </div>

                    </div>


                </div>

                <br />
		        <input id = "continuarP2" type="submit" value="Continuar" class = "redB" />

		    </div>	        
        
	    
    </div> 
    



		
	<div id="tabs-2">	

	<div class="widget">

            <div class="title">
                <h6>Registrar Datos de la reserva</h6>
            </div>

            


            
            

            <div class="formRow" id = "pasear1"><span>Tipo de Documento</span>
                
               <div class = "formRight"> 
                    
                    <select id="ComboCliente">
                        
                        <option value = "0">Escoja un tipo de documento</option>
                        <option value = "DNI">DNI</option>
                        <option value = "RUC">RUC</option>
                    </select>
                    
               </div>
                
               <div class="clear"></div>
            </div>

            <div class="formRow" id = "pasear2"><span>Nro. de Documento</span>                
               <div class = "formRight" > 
                    <input type="text" value="" id="nDoc" />
               </div>                
               <div class="clear"></div>
            </div>

            <div class="formRow"><span>* Ingrese su mail y contraseña para obtener sus datos, caso contrario, ingreselos para registrarlos</span>                                               
                   <div class="clear"></div>
            </div>

            <div class="formRow"><span>Email</span>                
                   <div class = "formRight" > 
                        <input type="text" value="" id="mailNatural" />
                   </div>                
                   <div class="clear"></div>
            </div>

            <div class="formRow"><span>Contraseña</span>                
                   <div class = "formRight" > 
                        <input type="password" value="" id="password" />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input id = "obtenerPass" type="submit" value="Obtener Datos" class = "redB" />
                   </div>                
                   <div class="clear"></div>
            </div>

            
            <div class="formRow" id = "opcionR"><span><font color="#FF0000">* Usuario - Password Incorrectos</font></span>                                                
                   <div class="clear"></div>
            </div>

            <div class="formRow" id = "opcionT"><span><font color="#008000">* Logeado</font></span>                                                
                   <div class="clear"></div>
            </div>
             
            <div id="juridica">
                <div class="formRow"><span>Razon Social</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="razonDReserva" />
                   </div>
                
                   <div class="clear"></div>
                </div>

                

                <div class="formRow"><span>Teléfono</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="telef" />
                   </div>
                
                   <div class="clear"></div>
                </div>

                <div class="formRow"><span>Tarjeta de credito</span>
                
                   <div class = "formRight" > 
                        <select id = "tipoTarjetaJ">
                            <option value = "Visa">Visa</option>
                            <option value = "Mastercard">Mastercard</option>
                        </select>
                   </div>
                
                   <div class="clear"></div>
                </div>

                <div class="formRow"><span>Nro. de tarjeta</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="nTarjeta" />
                   </div>
                
                   <div class="clear"></div>
                </div>

                @*<div class="formRow"><span>Fecha de caducidad</span>                
				    <div class = "formRight" > 
					    <div class="demo">
						    <input type="text" id="FechaCaduca"/>
					    </div>
				    </div>                
				    <div class="clear"></div>
			    </div>*@

                @*<div class="formRow"><span>Comentarios</span>                
				    <div class = "formRight" > 
					    <div class="demo">
						    <textarea id = "comment"></textarea>
					    </div>
				    </div>                
				    <div class="clear"></div>
			    </div>*@

            </div>

            <div id="natural">
                <div class="formRow"><span>Nombre</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="nombreDReserva" />
                   </div>
                
                   <div class="clear"></div>
                </div>
            

               @* <div class="formRow"><span>Apellidos</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="ApellidoDReserva" />
                   </div>
                
                   <div class="clear"></div>
                </div>
                *@
                
                       

                <div class="formRow"><span>Teléfono</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="telefNatural" />
                   </div>
                
                   <div class="clear"></div>
                </div>

                <div class="formRow"><span>Tarjeta de credito</span>
                
                   <div class = "formRight" > 
                        <select id = "tipoTarjeta">
                            <option value = "Visa">Visa</option>
                            <option value = "Mastercard">Mastercard</option>
                        </select>
                   </div>
                
                   <div class="clear"></div>
                </div>

                <div class="formRow"><span>Nro. de tarjeta</span>
                
                   <div class = "formRight" > 
                        <input type="text" value="" id="nTarjetaNatural" />
                   </div>
                
                   <div class="clear"></div>
                </div>

                @*<div class="formRow"><span>Fecha de caducidad</span>                
				    <div class = "formRight" > 
					    <div class="demo">
						    <input type="text" id="FechaCaducaNatural"/>
					    </div>
				    </div>                
				    <div class="clear"></div>
			    </div>*@

                @*<div class="formRow"><span>Comentarios</span>                
				    <div class = "formRight" > 
					    <div class="demo">
						    <textarea id = "commentN"></textarea>
					    </div>
				    </div>                
				    <div class="clear"></div>
			    </div>*@
            </div>
        </div>

        <p>
		<input id = "continuarP3" type="submit" value="Reservar" class = "redB" />
    </p>
    
    </div> @*div TAbs clientes*@

    <div id = "tabs-3">

        &nbsp;
        &nbsp;
        <p>
		<input id = "retornar" type="submit" value="Atras" class = "redB" />
        </p>
                 
        <div class="widget">
            
            <div class="title">
                <h6>Confirmación reserva</h6>            
            </div>
                        
            

            <div class="formRow"><span>Fecha de reserva</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarFechaReserva"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>

            <div class="formRow"><span>Fecha de Salida</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarFechaSalida"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>    

            <div class="formRow"><span>Total($)</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarTotal"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>  
            
            <div class="formRow"><span>Tipo de Documento</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarTipoDocumento"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>  

            <div class="formRow"><span>Nro de Documento</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarNroDocumento"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>  

            <div class="formRow"><span>Nombre</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarNombre"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>

            <div class="formRow"><span>Email</span>
                
                   <div class = "formRight" > 
                        <span id = "mostrarEmail"></span>
                   </div>
                
                   <div class="clear"></div>
            </div>


            <div class="formRow"><span>Ubicación</span>
                
                   <div class = "formRight" > 
                       <div id="maps"></div>
                   </div>
                
                   <div class="clear"></div>
            </div>    

            <div class="formRow"><span>Comentarios</span>                
				    <div class = "formRight" > 
					    <div class="demo">
						    <textarea id = "comment"></textarea>
					    </div>
				    </div>                
				    <div class="clear"></div>
			    </div>
               
        </div>

        <p>
		<input id = "enviar" type="submit" value="Enviar" class = "redB" />
        </p>
            
        </div>

    </div>



</div>


<div id="dialog-modal" title="Datos incorrectos">
	<p>Por favor, ingrese datos correctos</p>
</div>
<div id="espera" title="Espere... ingresando datos">
	<p>Procesando información ...</p>
</div>
<div id="faltanDatos" title="Faltan Datos">
	<p>Verifique que estén llenos todos los campos solicitados</p>
</div>
<div id="error" title="">
	<p id = "msjError">...Ooops!</p>
</div>


</body>



</html>

